<template>
<div class="show-size">
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/page/book/BookHotel' }">
      <i class="el-icon-s-promotion"></i> 订酒店首页
    </el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/page/book/BookHotel-Theme' }">酒店搜索</el-breadcrumb-item>
    <el-breadcrumb-item>酒店详情</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>
<!--  头部图片-->
  <div>
    <div class="main-title">
      <h1>{{hotel.name}}</h1><br>
      <span style="color: #99a9bf;font-size: 15px">地址：{{hotel.location}}</span>
    </div>
    <el-card>
      <img :src="serveUrl+hotel.url" height="400px" width="100%"/>
      <div style="padding-top: 10px;position: relative">
        <a class="infoA" href="#book">订购</a>
        <a class="infoA" href="#info">基本信息</a>
        <a class="infoA" href="#comment">评论</a>
      </div>
      <el-rate @change="commitScore()" class="rate-style" v-model="hotelScore.score"></el-rate>
    </el-card>
  </div>
<!--订购  -->
  <div id="book" class="block" style="margin-top: 20px">
    <el-date-picker
        v-model="value2"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
    </el-date-picker>
    <el-button @click="searchRooms()" type="warning" plain>查看</el-button>
    <el-button style="position: relative;left: 330px;width: 100px" @click="complain()" type="warning" plain>投诉</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="roomName" label="房间类型" align="center" width="200px">

      </el-table-column>
      <el-table-column prop="remainder" label="剩余数量" align="center" width="200px"></el-table-column>
      <el-table-column prop="price" label="单间价格" align="center" width="200px"></el-table-column>
      <el-table-column label="预订" align="center">
        <template slot-scope="scope">
          <el-button @click="book(scope.row)" type="warning" plain>订购</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
<!--  支付区域-->
  <el-dialog top="200px" title="支付页面" width="400px" :visible.sync="payFormVisible">
    <span style="font-weight: bolder;font-size: 30px">总价：¥</span>
    <span style="color: #FFA902FF;font-weight: bolder;font-size: 30px">{{currentOrder.orderPrice}}</span>
    <div style="width: 360px">
      <img src="../../../assets/imgs/2.png" style="width: 100%"/>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="notPay()">取消支付</el-button>
      <el-button type="warning" @click="isPay()">完成支付</el-button>
    </div>
  </el-dialog>
<!--  投诉内容区域-->
  <el-dialog  top="300px" title="投诉页面" width="400px" :visible.sync="complainFormVisible">
    <el-input
        class="textArea"
        destroy-on-close="true"
        type="textarea"
        placeholder="请输入内容"
        v-model="complainData.complainText"
        maxlength="250"
        show-word-limit
    >
    </el-input>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeComplain()">取 消</el-button>
      <el-button type="warning" @click="submitComplainData()">确定</el-button>
    </div>
  </el-dialog>
  <!--  订购内容区域-->
  <el-dialog title="订购页面" width="800px" :visible.sync="dialogFormVisible">
    <el-form :model="ruleForm" :rules="rules" label-width="180px" class="demo-ruleForm">
      <el-form-item label="酒店名字" prop="hotelName">
        <el-input :disabled="true" style="width: 450px" v-model="ruleForm.hotelName"></el-input>
      </el-form-item>
      <el-form-item label="房间类型" prop="roomName">
        <el-input :disabled="true" style="width: 450px" v-model="ruleForm.roomName"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input style="width: 450px" v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input style="width: 450px" v-model="ruleForm.realName"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input style="width: 450px" v-model="ruleForm.idCard"></el-input>
      </el-form-item>
      <el-form-item label="居住日期" prop="value2">
        <el-date-picker
            v-model="value2"
            :disabled="true"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="人数" prop="numberOfPeople">
        <el-input-number v-model="ruleForm.numberOfPeople" :min="1" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item label="订购房间数" prop="countOfBuyRooms">
        <el-input-number v-model="ruleForm.countOfBuyRooms" :min="1" :max="maxRoom"></el-input-number>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeBookDialog()">取 消</el-button>
      <el-button type="warning" @click="submit()">订购</el-button>
    </div>
  </el-dialog>
<!-- 基本信息   -->
  <el-card id="info" class="card-el">
    <el-row>
      <el-col :span="4">
        <span style="font-size: 20px;font-family: 华文细黑;font-weight: bolder">基本信息</span>
      </el-col>
      <el-col :span="20">
        <el-descriptions style="font-size: 15px;padding-top: 3px">
          <el-descriptions-item label="入住时间">15:00之后</el-descriptions-item>
          <el-descriptions-item label="离店时间">12:00之前</el-descriptions-item>
          <el-descriptions-item label="酒店规模">30间套房</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col>
        <el-descriptions title="简介"  :colon="false" style="font-size: 15px;padding-top: 3px;font-family: 华文细黑;font-weight: bolder">
          <el-descriptions-item>
            <p>
              {{hotel.description}}
            </p>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="4">
        <span style="font-size: 20px;font-family: 华文细黑;font-weight: bolder">主要设施</span>
      </el-col>
      <el-col :span="20">
        <el-descriptions :column="5" :colon="false" style="font-size: 15px;padding-top: 3px">
          <el-descriptions-item>
            <i class="el-icon-goods"></i>
            <span>购物</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <i class="el-icon-video-camera-solid"></i>
            <span>微型电影院</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <i class="el-icon-s-shop"></i>
            <span>商店</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <i class="el-icon-headset"></i>
            <span>音乐厅</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <i class="el-icon-knife-fork"></i>
            <span>餐厅</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <i class="el-icon-coffee-cup"></i>
            <span>咖啡厅</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <i class="el-icon-basketball"></i>
            <span>篮球场</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <i class="el-icon-s-home"></i>
            <span>独立厕所</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <i class="el-icon-s-grid"></i>
            <span>电视</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <i class="el-icon-menu"></i>
            <span>空调</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </el-card>
<!--  评论-->
  <div id="comment">
    <el-row>
      <el-col>
        <span style="font-size: 20px;font-family: 华文细黑;font-weight: bolder">全部评论</span>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-empty v-if="commentState" :image-size="200"></el-empty>
      <div v-else style="box-sizing: border-box;padding-top: 50px" :key="item.id" v-for="item in userComments">
        <el-row >
          <el-col style="text-align: center" :span="6">
            <span style="color: darkorange">{{item.nickname}}</span>
          </el-col>
          <el-col :span="18">
            <p>{{item.comment}}</p>
          </el-col>
        </el-row>
        <el-row v-model="item.id">
          <div key="1" class="line"></div>
        </el-row>
      </div>
    <el-input
        class="textArea"
        type="textarea"
        placeholder="请输入内容"
        v-model="commitUserComment.comment"
        maxlength="250"
        show-word-limit
    >
    </el-input>
    <el-button @click="commitComments()" style="float: right" type="warning" plain>发表评论</el-button>

  </div>

</div>
</template>

<script>
export default {
  data(){
    return{
      ruleForm:{
        username:'',
        userId:'',
        hotelName:'',
        hotelId:'',
        roomName:'',
        roomId:'',
        phone:'',
        realName:'',
        idCard:'',
        checkInTime:'',
        departureTime:'',
        numberOfPeople: 1,
        countOfBuyRooms: 1
      },
      maxRoom:'',
      hotel:{},
      currentOrder:{},
      activeNames: ['1'],
      hotelScore:{
        hotelName:'',
        hotelId:'',
        username:'',
        userId:'',
        score:0
      },
      value2:[],
      searchForRooms:{
        id:'',
        checkInTime:'',
        departureTime:''
      },
      tableData:[],
      userInfo:{},
      commentState:true,
      userComments:[],
      commitUserComment:{
        username:'',
        nickname:'',
        hotelName:'',
        userId:'',
        hotelId:'',
        comment:''
      },
      complainData:{
        hotelName:'',
        hotelId:'',
        complainText:''
      },
      serveUrl:'http://localhost:9580',
      searchHotelId:'',
      dialogFormVisible:false,
      complainFormVisible:false,
      payFormVisible:false,
      rules:{
        phone:[
          {required: true, message: '请输入输入手机号码', trigger: 'blur'},
          {pattern: /^1[3-9]\d{9}$/, message: '请输入11位手机号码', trigger: 'blur'}
        ],
        realName:[
          {required: true, message: '请输入输入真实姓名', trigger: 'blur'}
        ],
        idCard:[
          {required: true, message: '请输入输入身份证号', trigger: 'blur'},
          {pattern: /^\d{15}|\d{18}$/, message: '请输入正确的身份证格式', trigger: 'blur'}
        ]

      }
    }
  },
  methods:{
    isPay(){
      let url = 'http://localhost:9580/orders/user/'+this.currentOrder.id+'/updateOrderStateByOrderId';
      console.log('url'+url);

      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .get(url).then((response) =>{
            let responseBody=response.data;
            if (responseBody.state==20000){
              this.$message({
                showClose: true,
                message: '支付成功！',
                type: 'success'
              });
              this.payFormVisible=false;
            }else {
              this.$message({
                showClose: true,
                message: responseBody.message,
                type: 'error'
              });
            }
          })
    },
    notPay(){
      this.payFormVisible=false;
    },
    getCurrentOrder(){
      let url = 'http://localhost:9580/orders/user/getLatestOrderById';
      console.log("url"+url);

      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .get(url).then((response) =>{
            let responseBody=response.data;
            this.currentOrder=responseBody.data;
            console.log(this.currentOrder);
      })
    },
    submitComplainData(){
      this.complainData.hotelName=this.hotel.name;
      this.complainData.hotelId=this.hotel.id;
      /*this.complainData.username=this.userInfo.username;
      this.complainData.userId=this.userInfo.id;*/
      let url = 'http://localhost:9580/hotelComplains/user/addHotelScore';
      console.log("url"+url);
      console.log(this.complainData);
      let formData=this.qs.stringify(this.complainData);
      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .post(url,formData).then((response) =>{
          let responseBody=response.data;
          if (responseBody.state==20000){
            this.$message({
              showClose: true,
              message: "投诉成功，我们将第一时间处理您的诉求，请耐心等待",
              type: 'success'
            });
            this.complainFormVisible=false;
            this.complainData.complainText="";
          }else if (responseBody.state==40300){
            this.$router.push('/login');
            this.$message({
              showClose: true,
              message: '您当前未登录，请登录！',
              type: 'error'
            });
          } else {
            this.$message({
              showClose: true,
              message: responseBody.message,
              type: 'error'
            });
          }
      })
    },
    closeBookDialog(){
      this.dialogFormVisible=false;
      this.ruleForm.realName="";
      this.ruleForm.idCard="";
    },
    closeComplain(){
      this.complainFormVisible=false;
      this.complainData.complainText="";
    },
    complain(){
      this.complainFormVisible=true;
    },
    loadHotelScore(){
      let hotelId=localStorage.getItem('hotelId')
      let url = 'http://localhost:9580/hotelScores/user/getScore/'+hotelId;
      console.log("url"+url);
      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .get(url).then((response) =>{
           let responseBody=response.data;
           if (responseBody.data==null){
             this.hotelScore.score=0;
           }else {
             this.hotelScore.score=responseBody.data.score;
           }
      })
    },
    commitScore(){
      this.hotelScore.hotelName=this.hotel.name;
      this.hotelScore.hotelId=this.hotel.id;
      console.log(this.hotelScore);
      let url = 'http://localhost:9580/hotelScores/user/addHotelScore';


      let formData=this.qs.stringify(this.hotelScore);

      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .post(url,formData).then((response) => {
        let responseBody=response.data;
        if (responseBody.state==20000){
          this.$message({
            showClose: true,
            message: "评分成功",
            type: 'success'
          });
        }else if (responseBody.state==40300){
          this.$router.push('/login');
          this.$message({
            showClose: true,
            message: '您当前未登录，请登录！',
            type: 'error'
          });
        }else {
          this.$message({
            showClose: true,
            message: responseBody.message,
            type: 'error'
          });
        }
      })
    },
    commitComments(){
      let url = 'http://localhost:9580/userComments/user/addUserComment';
      console.log("url"+url);
      this.commitUserComment.hotelName=this.hotel.name;
      this.commitUserComment.hotelId=this.searchHotelId;
      let formData=this.qs.stringify(this.commitUserComment);

      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .post(url,formData).then((response) => {
          let responseBody=response.data;
          if (responseBody.state==20000){
            this.$message({
              showClose: true,
              message: "发表成功",
              type: 'success'
            });
            this.loadHotelComments();
            this.commitUserComment.comment="";
          }else if (responseBody.state==40300){
            this.$router.push('/login');
            this.$message({
              showClose: true,
              message: '您当前未登录，请登录！',
              type: 'error'
            });
          }else {
            this.$message({
              showClose: true,
              message: responseBody.message,
              type: 'error'
            });
          }
      })

    },
    loadHotelComments(){
      let url = 'http://localhost:9580/userComments/user/'+this.searchHotelId+'/getHotelCommentListByHotelId';
      console.log("url"+url);
      this.axios
          .create({'headers':{'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
          let responseBody=response.data;
          if (responseBody.state==20000){
            this.userComments=responseBody.data;
            console.log(this.userComments);
            if (this.userComments.length==0){
              this.commentState=true;
            }else {
              this.commentState=false;
            }
          }else{
            this.$message({
              showClose: true,
              message: responseBody.message,
              type: 'error'
            });
          }
      })
    },
    submit(){
      let url = 'http://localhost:9580/orders/user/addOrder';
      console.log("url"+url);

      let fromData=this.qs.stringify(this.ruleForm);
      this.axios
          .create({'headers':{'Authorization': localStorage.getItem('jwt')}})
          .post(url,fromData).then((response) => {
            let responseBody=response.data;
            if (responseBody.state==20000){
              this.$message({
                showClose: true,
                message: '下单成功！',
                type: 'success'
              });
              this.ruleForm.idCard="";
              this.ruleForm.realName="";
              this.dialogFormVisible=false;
              this.payFormVisible=true;
              this.getCurrentOrder();
            }else {
              this.$message({
                showClose: true,
                message: responseBody.message,
                type: 'error'
              });
            }
      })
    },
    book(bookData){
      if (this.value2==null){
        this.$message({
          showClose: true,
          message: "请选择居住的日期",
          type: 'error'
        });
        return;
      }
      this.dialogFormVisible=true;
      this.ruleForm.hotelName=bookData.hotelName;
      this.ruleForm.hotelId=bookData.hotelId;
      this.ruleForm.roomName=bookData.roomName;
      this.ruleForm.roomId=bookData.roomId;
      this.maxRoom=bookData.remainder;
      this.ruleForm.checkInTime=this.value2[0];
      this.ruleForm.departureTime=this.value2[1];
      this.ruleForm.username=this.userInfo.username;
      this.ruleForm.userId=this.userInfo.id;
      this.ruleForm.phone=this.userInfo.phone;
      console.log(this.ruleForm);
    },
    getUserInfo(){
      let url = 'http://localhost:9580/users/user';

      this.axios
          .create({'headers':{'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
            let responseBody=response.data;
            this.userInfo=responseBody.data;
      })
    },
    searchRooms(){
        this.searchForRooms.id=this.searchHotelId;
        if (this.value2==null){
          this.$message({
            showClose: true,
            message: "请选择居住的日期",
            type: 'error'
          });
          return;
        }
        this.searchForRooms.checkInTime=this.value2[0];
        this.searchForRooms.departureTime=this.value2[1];
        if (this.searchForRooms.checkInTime==null || this.searchForRooms.departureTime==null){
          this.$message({
            showClose: true,
            message: "请选择居住的日期",
            type: 'error'
          });
          return;
        }
        console.log(this.searchForRooms);
      let url = 'http://localhost:9580/orders/user/getCurrentRoomsByThreeColumn';
      console.log("url:"+url);

      let fromData=this.qs.stringify(this.searchForRooms);
      this.axios
          .create({'headers':{'Authorization': localStorage.getItem('jwt')}})
          .post(url,fromData).then((response) => {
            let responseBody=response.data;
              if (responseBody.state == 20000){
                this.tableData=responseBody.data;
                console.log(this.tableData);
              }else if (responseBody.state==40300){
                this.$router.push('/login');
                this.$message({
                  showClose: true,
                  message: '您当前未登录，请登录！',
                  type: 'error'
                });
              } else {
                this.$message({
                  showClose: true,
                  message: responseBody.message,
                  type: 'error'
                });
              }
          })
    },
    loadHotelInfo(){
      this.searchHotelId=localStorage.getItem("hotelId");
      let url = 'http://localhost:9580/hotels/user/'+this.searchHotelId+'/getHotelById';

      /* let formData=this.qs.stringify(this.activeName1.name);*/
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.hotel=responseBody.data;
        console.log(this.hotel);
      });
    },

  },
  mounted() {
    this.loadHotelInfo();
    this.getUserInfo();
    this.loadHotelComments();
    this.loadHotelScore();
  }
}
</script>

<style>
.line{
  border-bottom: 1px dotted #000;
  margin-top: 40px;
}
.rate-style{
  position: absolute;
  left: 1200px;
  top: 650px;
}
.infoA{
  padding-left: 50px;
  padding-top: 10px;
  text-decoration: none;
  color: black;
}
.el-link{
  text-decoration: none;
}
.card-el{
  margin: 20px 0px;
}
.show-size {
  width: 950px;
}
.main-title {
  font-size: 24px;
  color: #333;
  line-height: 30px;
}
.main-title h1 {
  display: inline;
  font-weight: normal;
}
.head {
  color: #333;
  text-align: center;
  line-height: 60px;
  box-sizing: border-box;
}

.head1 {
  margin-top: 100px;
  padding-left: 0px;
  width: 950px;
}

.el-main {
  color: #333;
  height: 100%;
  padding-left: 450px;
  box-sizing: border-box;
}

.el-menu-demo {
  width: 100%;
  margin: 0 auto;
  padding-left: 350px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.head-r-l a {
  text-decoration: none;
}

.el-row {
  margin-bottom: 20px;
}

:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {

}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

h2 {
  margin: 0;
  font-size: 20px;
}

.span-s {
  font-size: 15px;
}

.hotel-live {
  text-align: center;
  width: 950px;
  margin-top: 50px;
}

.el-tabs-s {
  width: 950px;
  box-sizing: border-box;
}

.monitorTop {
  /*!/ position: relative;  相对定位,*/
  position: relative;
  /*vw是width of view(port)的缩写；
100vw表示百分之百的视图宽度；
123px是需要减去的宽度；
减号的两边必须都有至少一个空格*/
  height: calc(50% - 123px);
}

.monitorTop .el-tabs__item {
  font-size: 20px !important;
}

::v-deep .el-tabs__nav-scroll {
  width: 50%;
  margin: 0 auto
}
.img-s{
  width: 303px;
  height: 220px;
  margin-bottom: 15px;
}
.foot-s{
  background-color: #3e3e3e;
  height: 300px;
  text-align: center;
  color: #bbbbbb;
}
.b1{
  height: 60px;
  font-size: 15px;
}
.span-text{
  z-index: 3;
  position: relative;
  color: white;
  font-size: 25px;
  top: -125px;
  left: 110px;
}
.span-hotel{
  z-index: 3;
  position: relative;
  color: white;
  font-size: 15px;
  top: -35px;
  left: 10px;
}
</style>